<template>
	<view class="feedback-wrap">
		<!-- 反馈类型 -->
		<view class="feedback-type">
			<view class="feedback-type-title">反馈类型</view>
			<view class="feedback-type-con">
				<template v-for="(item,index) in feedbackTypeList">
				   <view class="feedback-type-item" :class="{'type-active':currentIndex==index?true:false}" :key="item.code" @click="feedbackTypeHandle(index)">{{item.name}}</view>
				</template>
			</view>
		</view>
		<!-- 反馈内容 -->
		<view class="feedback-con">
			<view class="feedback-con-title">
				<text>反馈内容</text>
				<text class="feedback-con-num">{{conLength}}/200</text>
			</view>
			<view class="feedback-con-msg">
				<textarea @input="getFeedbackMessageHandle" maxlength="200" class="feedback-con-textarea" placeholder="请输入反馈内容并上传图片" placeholder-class="placeholderclass"></textarea>
			</view>
		</view>
		<!-- 上传图片 -->
		<view class="feedback-image">
			<view class="feedback-image-title">
				<text>上传图片</text>
			</view>
			<view class="feedback-image-box">
				<template v-for="(item,index) in tempFileList">
					<view class="feedback-image-item" :key="item.path">
						<image :src="item.path" class="feedback-image-icon"></image>
						<text class="iconfont feedback-image-delete" @click="deleteImgHandle(index)">&#xe695;</text>
					</view>
				</template>
				<view class="feedback-image-btn" @click="chooseImageHandle">
					<text class="iconfont" style="font-size: 20px;">&#xe699;</text>
					<text style="padding-top: 6px;">添加图片</text>
				</view>
			</view>
		</view>
		<!-- 手机号码 -->
		<view class="feedback-phone">
			<view class="feedback-phone-title">
				<text>手机号码</text>
			</view>
			<view class="feedback-phone-box">
				<input class="feedback-phone-input" @input="getPhoneHandle" placeholder="请输入您的手机号便于我们联系您" placeholder-class="placeholderclass" />
			</view>
		</view>
		
		<view class="form-btn mtop_30 mbottom_30" @click="submitHandle">提交反馈</view>
		
	</view>
</template>

<script>

	export default {
		data() {
			return {
				currentIndex:"0",
				feedbackTypeList:[{
					code:"0",
					name:'BUG反馈'
				},{
					code:"1",
					name:'功能建议'
				},{
					code:"2",
					name:'其他问题'
				}],
				feedbackValue:"",//反馈内容
				conLength:0,
				tempFileList:[],//选择图片临时存储
				tempFileObject:[],//上传腾讯云返回图片路径
			};
		},
		onLoad() {
			
		},
		watch:{
			feedbackValue(newVal,oldVal){
				console.log("计算属性",newVal)
				this.conLength=newVal.length;
			}
		},
		methods:{
			//选择反馈类型
			feedbackTypeHandle(currentIndex){
				console.log("[反馈类型]",currentIndex)
				this.currentIndex=currentIndex;
			},
			//获取返回内容
			getFeedbackMessageHandle(e){
				console.log("[反馈内容]",e)
				this.feedbackValue=e.detail.value
			},
			//上传图片
			chooseImageHandle(){
				console.log("[上传图片]")
				let that=this;
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res){
						console.log(res)
						let tempFiles=res.tempFiles;
					    tempFiles.forEach(function(item,index){
							console.log("-------------",item.name)
							that.tempFileList.push({
								name:item.name,
								path:item.path
							})
						})
						
					}
				})
			},
			//删除图片
			deleteImgHandle(currentIndex){
				console.log("[删除图片]")
			    this.tempFileList.splice(currentIndex,1)
				console.log(this.tempFileList)
			},
			//提交反馈意见
			submitHandle(){
				console.log("[反馈意见]")
				console.log(this.tempFileList)
			}
		}
	}
</script>

<style lang="scss" scoped>
.feedback-wrap{
	width: 91.47%;
	margin: 12px auto;
	display: flex;
	flex-direction: column;
	.feedback-type{
		display: flex;
		flex-direction: column;
		.feedback-type-title{
			font-size:15px;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FEFEFE;
		}
		.feedback-type-con{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			margin-top: 10px;
			.feedback-type-item{
				background: #0A0E1D;
				border: 1px solid #70737F;
				border-radius: 18px;
				font-size: 14px;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FEFEFF;
				padding: 7.5px 17.5px;
				margin-right: 11.5px;
				margin-top: 6px;
			}
			.type-active{
				border: 1px solid #E54848;
				background: linear-gradient(0deg, #F65555 0%, #E54848 100%);
				color: #FEFEFF;
			}
		}
	}
	.feedback-con{
		display: flex;
		flex-direction: column;
		margin-top: 21.5px;
		.feedback-con-title{
			font-size:15px;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FEFEFE;
			position: relative;
			.feedback-con-num{
				position: absolute;
				right: 0;
				top: 0;
			}
		}
		.feedback-con-msg{
			min-height: 120px;
			border: 1px solid #70737F;
			border-radius: 8px;
			margin-top: 12px;
			padding: 12px 12px;
			.feedback-con-textarea{
				width: 100%;
				font-size:14px;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FEFEFE;
			}
			.placeholderclass{
				color: #999999;
			}
		}
		
	}
	.feedback-image{
		display: flex;
		flex-direction: column;
		margin-top: 21.5px;
		.feedback-image-title{
			font-size:15px;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FEFEFE;
			position: relative;
		}
		.feedback-image-box{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			margin-top: 2px;
			.feedback-image-item{
				border: 1px solid #70737F;
				border-radius: 8px;
				width: 62px;
				height: 62px;
				margin-right:9.5px;
				margin-top: 9.5px;
				display: flex;
				background-color: #FFFFFF;
				position: relative;
				.feedback-image-icon{
					border-radius: 8px;
					width: 100%;
					height: 100%;
					display: block;
				}
				.feedback-image-delete{
					color: #ff0000;
					position: absolute;
					top: -5px;
					right: -5px;
				}
			}
			.feedback-image-btn{
				border: 1px solid #70737F;
				border-radius: 8px;
				width: 62px;
				height: 62px;
				margin-right:9.5px;
				margin-top: 9.5px;
				display: flex;
				flex-direction: column;
				font-size: 13px;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #999999;
				justify-content: center;
				align-items: center;
			}
		}
	}
	.feedback-phone{
		display: flex;
		flex-direction: column;
		margin-top: 21.5px;
		.feedback-phone-title{
			font-size:15px;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FEFEFE;
			position: relative;
		}
		.feedback-phone-box{
			width: 100%;
			display: flex;
			flex-direction: row;
			margin-top:8px;
			.feedback-phone-input{
				border-bottom: 1px solid #70737F;
				width: 100%;
				height: 30px;
				font-size: 14px;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FEFEFE;
			}
			.placeholderclass{
				color: #999999;
			}
		}
		
	}
}
</style>
